<template>
  <view class="home-container">
    <!-- 内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 轮播图 -->
      <view class="banner-section">
        <swiper class="banner-swiper" indicator-dots circular autoplay>
          <swiper-item v-for="(item, index) in banners" :key="index">
            <view class="banner-item" :style="{ backgroundColor: item.color }">
              <text class="banner-text">{{ item.title }}</text>
            </view>
          </swiper-item>
        </swiper>
      </view>

      <!-- 快捷功能 - 三大模块 -->
      <view class="modules-section">
        <view class="section-title-wrapper">
          <text class="section-main-title">家庭必备指南</text>
          <text class="section-desc">探索生活美好，记录精彩瞬间</text>
        </view>
        <view class="quick-modules">
          <view class="module-card card-interactive rounded-2xl" v-for="(module, index) in modules" :key="index"
            @tap="onModuleTap(module)">
            <view class="module-header">
              <view class="module-icon-wrapper" :style="{ background: module.iconBg }">
                <text class="module-icon">{{ module.icon }}</text>
              </view>
              <view class="module-title-wrapper">
                <text class="module-title">{{ module.title }}</text>
                <text class="module-subtitle">{{ module.subtitle }}</text>
              </view>
            </view>
            <view class="module-actions">
              <view class="module-action-item card-clickable" v-for="(action, actionIndex) in module.actions"
                :key="actionIndex" @tap.stop="onActionTap(action)">
                <text class="action-icon-small">{{ action.icon }}</text>
                <text class="action-label">{{ action.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 最新动态 -->
      <view class="latest-section card rounded-xl">
        <view class="section-header">
          <text class="section-title">最新动态</text>
          <text class="section-more">查看更多 ></text>
        </view>
        <view class="record-list">
          <view class="record-item card-list-item rounded-lg" v-for="(item, index) in records" :key="index"
            @tap="onRecordTap(item)">
            <image class="record-avatar rounded-full" :src="item.avatar" mode="aspectFill"></image>
            <view class="record-content">
              <text class="record-username">{{ item.username }}</text>
              <text class="record-text">{{ item.content }}</text>
              <text class="record-time">{{ item.time }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 自定义 TabBar -->
    <custom-tabbar :current="0" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'

// 轮播图数据
const banners = ref([
  { title: '记录美好生活', color: '#4A90E2' },
  { title: '分享精彩瞬间', color: '#E67E22' },
  { title: '珍藏温暖回忆', color: '#27AE60' }
])

// 三大功能模块
const modules = ref([
  {
    title: '美食天地',
    subtitle: '探索美味世界',
    icon: '🍽️',
    path: '/pages/food/food',
    iconBg: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
    type: 'food',
    actions: [
      { name: '菜谱', icon: '📖', type: 'recipe' },
      { name: '探店', icon: '📍', type: 'explore' }
    ]
  },
  {
    title: '养生之道',
    subtitle: '健康生活指南',
    icon: '🌿',
    path: '/pages/health/health',
    iconBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    type: 'health',
    actions: [
      { name: '养生计划与提醒', icon: '⏰', type: 'reminder' },
      { name: '养生视频', icon: '🎬', type: 'video' }
    ]
  },
  {
    title: '旅行足迹',
    subtitle: '记录美好旅程',
    icon: '✈️',
    iconBg: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
    type: 'travel',
    actions: [
      { name: '游记', icon: '📝', type: 'travelogue' },
      { name: '攻略', icon: '🗺️', type: 'guide' }
    ]
  }
])

// 最新动态
const records = ref([
  {
    avatar: '/static/logo.png',
    username: '用户A',
    content: '今天天气真好，出门散步心情愉快~',
    time: '2分钟前'
  },
  {
    avatar: '/static/logo.png',
    username: '用户B',
    content: '完成了今天的工作计划，感觉充实！',
    time: '10分钟前'
  },
  {
    avatar: '/static/logo.png',
    username: '用户C',
    content: '和朋友聚会，度过了愉快的周末时光',
    time: '1小时前'
  }
])

// 模块点击
const onModuleTap = (module: any) => {
  console.log(module)
  uni.navigateTo({
    url: module.path
  })
}

// 功能项点击
const onActionTap = (action: any) => {
  uni.showToast({
    title: `点击了${action.name}`,
    icon: 'none'
  })
}

// 动态记录点击
const onRecordTap = (item: any) => {
  uni.showToast({
    title: `查看${item.username}的动态`,
    icon: 'none'
  })
}
</script>

<style scoped>
.home-container {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
  /* 为自定义 TabBar 预留空间 */
}

/* 内容滚动区 */
.content-scroll {
  flex: 1;
  overflow-y: auto;
}

/* 轮播图 */
.banner-section {
  padding: 20rpx 30rpx;
}

.banner-swiper {
  width: 100%;
  height: 300rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.banner-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-text {
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
}

/* 模块区域 */
.modules-section {
  margin-top: 20rpx;
}

.section-title-wrapper {
  padding: 0 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.section-main-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #000;
  letter-spacing: 2rpx;
}

.section-desc {
  font-size: 26rpx;
  color: #999;
  letter-spacing: 1rpx;
}

/* 快捷功能模块 */
.quick-modules {
  padding: 0 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.module-card {
  padding: 32rpx;
  position: relative;
  overflow: hidden;
  min-height: 200rpx;
  background-color: #fff;
  /* Material Design 阴影效果 */
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.08),
    0 4rpx 8rpx rgba(0, 0, 0, 0.06),
    0 8rpx 16rpx rgba(0, 0, 0, 0.04);
  animation: card-reveal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

/* 卡片悬浮效果 */
.module-card:active {
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.12),
    0 8rpx 16rpx rgba(0, 0, 0, 0.08),
    0 16rpx 32rpx rgba(0, 0, 0, 0.06);
  transform: translateY(-2rpx);
}

/* 卡片依次出现动画 */
.module-card:nth-child(1) {
  animation-delay: 0.1s;
  animation-fill-mode: both;
}

.module-card:nth-child(2) {
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

.module-card:nth-child(3) {
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

/* 模块头部 */
.module-header {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 32rpx;
  position: relative;
  z-index: 1;
}

.module-icon-wrapper {
  width: 96rpx;
  height: 96rpx;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.module-icon {
  font-size: 56rpx;
}

.module-title-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.module-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000;
  letter-spacing: 1rpx;
}

.module-subtitle {
  font-size: 24rpx;
  color: #666;
}

/* 模块功能列表 */
.module-actions {
  display: flex;
  gap: 16rpx;
  position: relative;
  z-index: 1;
}

.module-action-item {
  flex: 1;
  background: #f8f9fa;
  border-radius: var(--radius-lg);
  padding: 20rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  border: 1rpx solid #e9ecef;
  transition: all var(--transition-fast);
  box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.08);
}

.module-action-item:active {
  background: #e9ecef;
  transform: scale(0.96);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.12);
}

.action-icon-small {
  font-size: 40rpx;
}

.action-label {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

/* 最新动态 */
.latest-section {
  margin: 20rpx 30rpx;
  padding: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  font-size: 24rpx;
  color: #999;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-item {
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.record-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.record-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.record-username {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.record-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.record-time {
  font-size: 22rpx;
  color: #999;
}
</style>
